<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table border="1">
        <caption>Test Result</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th colspan="4">Top Three Persormes</th>
            </tr>
            <!-- tr 行 -->
            <tr>
                <!-- th 表头 -->
                <th>Name</th>
                <th>Login ID</th>
                <th>Course Name</th>
                <th>Marks</th>
            </tr>
        </thead>
        <!-- 表体 -->
        <tbody>
            <tr>
                <!-- td 单元格内容，列 -->
                <td>Steve</td>
                <td>01234</td>
                <td>MYSQL</td>
                <td>92</td>
            </tr>
            <tr>
                <!-- td 单元格内容，列 -->
                <td>John</td>
                <td>01235</td>
                <td>MYSQL</td>
                <td>90</td>
            </tr>
            <tr>
                <!-- td 单元格内容，列 -->
                <td>Machel</td>
                <td>01236</td>
                <td>MYSQL</td>
                <td>80</td>
            </tr>
        </tbody>
        <!-- 底部 -->
        <tfoot>
            <tr>
                <!-- colspan 合并列（列跨度） -->
                <td colspan="3"> Total number of Students</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

    <br>
    <table border="1">
        <tr>
            <td rowspan="4">Top Three </td>
        </tr>
        <tr>
            <td>Steve</td>
            <td>01234</td>
            <td>MYSQL</td>
            <td>92</td>
        </tr>
        <tr>
            <td>John</td>
            <td>01235</td>
            <td>MYSQL</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Machel</td>
            <td>01236</td>
            <td>MYSQL</td>
            <td>80</td>
        </tr>
    </table>

    <br>
    <!-- emmet语法： table>tbody>tr*5>td*4 -->
    <table border="1">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

</body>

</html>